<template>
  <div
    class="mb-3 font-mi shadow-md w-full bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
    <div class="flex justify-end px-4 pt-4">
    </div>
    <div class="flex flex-col items-center pb-6">
      <!-- 博主头像 -->
      <div class="relative mb-4">
        <img class="w-14 h-14 rounded-full shadow-lg transition-transform duration-300 ease-in-out hover:scale-110"
          :src="$store.state.setting.avatar" />
        <span
          class="bottom-0 left-10 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
      </div>
      <!-- 博主昵称 -->
      <h5 class="mb-2 font-mi text-xl font-medium text-gray-900 dark:text-white">
        {{ $store.state.setting.author }}
      </h5>
      <!-- 介绍语 -->
      <!-- <span class="mb-6 text-sm font-mi text-gray-500 dark:text-gray-400">
        {{ $store.state.setting.introduction }}
      </span> -->
      <span class="mb-5 cursor-pointer text-sm text-gray-500 dark:text-gray-300"
        data-tooltip-target="introduction-tooltip-bottom" data-tooltip-placement="bottom">{{
          $store.state.setting.introduction }}</span>
      <div id="introduction-tooltip-bottom" role="tooltip"
        class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-normal text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700 dark:text-gray-300">
        介绍语
        <div class="tooltip-arrow" data-popper-arrow></div>
      </div>

      <!-- 文章数量、分类数量、标签数量、总访问量 -->
      <!-- flex 布局，justify-center 水平居中，gap-5 设置 flex 内子元素的间距 -->
      <div class="flex justify-center gap-5 mb-2 dark:text-gray-300">
        <!-- flex 布局，items-center 垂直居中，flex-col 设置子元素上下排列，hover: 用于设置鼠标移动到上面的样式，字体颜色、scale-110 放大效果，cursor-pointer 指定鼠标移动到上面为小手指样式 -->
        <div class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer">
          <!-- 字体大小为 text-lg , font-bold 字体加粗 -->
          <CountTo :value="statisticsInfo.articleTotalCount" customClass="text-lg font-bold"></CountTo>
          <!-- 字体大小为 text-sm -->
          <div class="text-sm">文章</div>
        </div>
        <div class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer">
          <CountTo :value="statisticsInfo.categoryTotalCount" customClass="text-lg font-bold"></CountTo>
          <div class="text-sm">分类</div>
        </div>
        <div class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer">
          <CountTo :value="statisticsInfo.tagTotalCount" customClass="text-lg font-bold"></CountTo>
          <div class="text-sm">标签</div>
        </div>
        <div class="flex items-center flex-col gap-1 hover:text-blue-700 hover:scale-110 cursor-pointer">
          <CountTo :value="statisticsInfo.pvTotalCount" customClass="text-lg font-bold"></CountTo>
          <div class="text-sm">总访问</div>
        </div>
      </div>

      <div class="flex mt-4 space-x-3 md:mt-5">
        <span v-if="$store.state.setting.githubHome">
          <a data-tooltip-target="github-tooltip-bottom" data-tooltip-placement="bottom"
            :href="$store.state.setting.githubHome" target="_blank">
            <svg t="1731375040180" class="icon w-7 h-7" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="8009" width="48" height="48">
              <path
                d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                p-id="8010" fill="#395fb7"></path>
            </svg>
          </a>
          <div id="github-tooltip-bottom" role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
            我的 GitHub
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </span>

        <span v-if="$store.state.setting.csdnHome">
          <a :href="$store.state.setting.csdnHome" data-tooltip-target="csdn-tooltip-bottom"
            data-tooltip-placement="bottom" target="_blank">
            <svg t="1731374953778" class="icon w-7 h-7" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5400" width="48" height="48">
              <path
                d="M729.32864 373.94944c-9.79456-5.94432-19.06176-6.784-19.14368-6.784l-1.06496-0.0512c-57.20064-3.8656-121.1648-5.83168-190.12608-5.83168l-13.98784 0.00512c-68.95616 0-132.92544 1.96096-190.12096 5.83168l-1.06496 0.0512c-0.08192 0-9.34912 0.83968-19.14368 6.784-15.04768 9.12896-24.27392 25.94816-27.4176 49.9712-10.07104 76.91264-4.38272 173.64992 0.18944 251.392 2.93888 49.96608 33.408 62.45888 85.04832 67.1488 10.78272 0.98816 69.08928 5.86752 159.50848 5.89312v-0.00512c90.4192-0.02048 148.72576-4.90496 159.5136-5.888 51.64032-4.68992 82.10944-17.18272 85.0432-67.1488 4.57728-77.74208 10.26048-174.47936 0.18944-251.392-3.1488-24.02816-12.37504-40.84736-27.42272-49.97632z m-390.9888 172.71808a23.64928 23.64928 0 0 1-31.68768-10.84416 23.68 23.68 0 0 1 10.84416-31.68768c2.03776-1.00352 50.69312-24.72448 110.5408-43.06432a23.68 23.68 0 1 1 13.88032 45.29152c-56.2944 17.24928-103.11168 40.07424-103.5776 40.30464z m268.89728 35.88608c-0.44032 2.23232-11.26912 54.64064-50.93888 54.64064-21.44256 0-36.10112-14.04928-44.98432-26.77248-8.69376 12.70784-22.80448 26.77248-42.65472 26.77248-35.5328 0-50.13504-48.26624-51.68128-53.77024a11.3664 11.3664 0 0 1 21.87776-6.1696c2.74944 9.6512 14.1312 37.20192 29.7984 37.20192 16.37376 0 28.89216-23.64416 31.98464-31.92832a11.37152 11.37152 0 0 1 10.6496-7.38816h0.06144c4.76672 0.03072 9.0112 3.02592 10.62912 7.50592 0.10752 0.28672 11.96544 31.81568 34.31424 31.81568 20.864 0 28.56448-35.95264 28.64128-36.32128a11.34592 11.34592 0 0 1 13.35808-8.93952 11.36128 11.36128 0 0 1 8.94464 13.35296z m110.11584-46.73536a23.68 23.68 0 0 1-31.68256 10.84416c-0.47104-0.2304-47.47264-23.1168-103.57248-40.30976a23.69024 23.69024 0 0 1-15.70816-29.58336 23.66976 23.66976 0 0 1 29.57824-15.70304c59.84768 18.33984 108.49792 42.0608 110.55104 43.06432a23.68 23.68 0 0 1 10.83392 31.68768z"
                fill="#F16C8D" p-id="5401"></path>
              <path
                d="M849.92 51.2H174.08c-67.8656 0-122.88 55.0144-122.88 122.88v675.84c0 67.87072 55.0144 122.88 122.88 122.88h675.84c67.87072 0 122.88-55.00928 122.88-122.88V174.08c0-67.86048-55.00928-122.88-122.88-122.88z m-36.60288 627.45088c-2.62656 44.57984-21.82144 78.63296-55.51616 98.48832-25.68192 15.13472-54.17472 19.48672-81.13664 21.9392-32.45568 2.94912-92.71808 6.09792-164.66432 6.1184-71.94112-0.02048-132.20864-3.16416-164.66432-6.1184-26.96192-2.45248-55.45472-6.80448-81.13152-21.9392-33.69472-19.85536-52.8896-53.90336-55.51104-98.4832-4.70528-80.13312-10.5728-179.85536 0.19456-262.10816C221.5424 335.16544 280.99072 311.57248 311.5008 310.37952a2482.64192 2482.64192 0 0 1 81.42336-4.08576c-7.53664-8.53504-19.88096-23.3216-28.81536-38.11328-13.73696-22.73792 8.52992-41.68704 8.52992-41.68704s23.68-20.36736 44.52864 5.21216c15.69792 19.26656 38.37952 55.99744 48.61952 72.95488l53.20704-0.21504c13.2608 0 26.33216 0.07168 39.2192 0.21504 10.24-16.95744 32.9216-53.6832 48.61952-72.95488 20.84352-25.57952 44.52864-5.21216 44.52864-5.21216s22.26176 18.94912 8.5248 41.68704c-8.9344 14.79168-21.27872 29.57824-28.81536 38.11328 28.35968 0.97792 55.56224 2.33984 81.42336 4.08064 30.5152 1.19808 89.9584 24.79104 100.61312 106.17344 10.7776 82.24768 4.9152 181.96992 0.20992 262.10304z"
                fill="#F16C8D" p-id="5402"></path>
            </svg>
          </a>
          <div id="csdn-tooltip-bottom" role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
            我的 B站
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </span>


        <!-- <span v-if="$store.state.setting.giteeHome">
    <a :href="$store.state.setting.giteeHome" data-tooltip-target="gitee-tooltip-bottom" data-tooltip-placement="bottom" target="_blank">
                    <svg t="1682483184788" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8999" width="28" height="28">
                        <path
                            d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                            fill="#C71D23" p-id="9000"></path>
                    </svg>
                </a>
                <div id="gitee-tooltip-bottom" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    我的 Gitee
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>
</span> -->


        <!-- <span v-if="$store.state.setting.zhihuHome">
    <a :href="$store.state.setting.zhihuHome" data-tooltip-target="zhihu-tooltip-bottom" data-tooltip-placement="bottom" target="_blank">
                    <svg t="1682483411912" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9603" width="30" height="30">
                        <path
                            d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM432.3 592.8l71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-0.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c0.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-0.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7h-110l-0.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24.1-18.1z m335.5 116h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-0.1 0 0z m216 94.3l56.8-38.1h45.6-0.1V364.7H596.7v302.5h14.1z"
                            fill="#1296DB" p-id="9604"></path>
                    </svg>
                </a>
                <div id="zhihu-tooltip-bottom" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    我的知乎
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>
</span> -->

      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { initTooltips } from 'flowbite'
import { onMounted, ref } from 'vue'
import { getStatisticsInfo } from '@/api/frontend/statistics'
// initialize components based on data attribute selectors
onMounted(() => {
  initTooltips();
})

const store = useStore()

// 统计信息(文章、分类、标签数量、总访问量)
const statisticsInfo = ref({})
getStatisticsInfo().then(res => {
    if (res.success) {
        statisticsInfo.value = res.data
    }
})

</script>
<style scoped></style>